/* Element Plus 自定义样式覆盖 */

/* 按钮 */
.el-button {
  &--primary {
    --el-button-bg-color: var(--primary-color);
    --el-button-border-color: var(--primary-color);
  }
  
  &--success {
    --el-button-bg-color: var(--success-color);
    --el-button-border-color: var(--success-color);
  }
  
  &--warning {
    --el-button-bg-color: var(--warning-color);
    --el-button-border-color: var(--warning-color);
  }
  
  &--danger {
    --el-button-bg-color: var(--danger-color);
    --el-button-border-color: var(--danger-color);
  }
}

/* 表单 */
.el-form {
  &-item {
    margin-bottom: 22px;
    
    &__label {
      font-weight: 500;
    }
  }
}

/* 输入框 */
.el-input {
  &__wrapper {
    &.is-focus {
      --el-input-border-color: var(--primary-color);
    }
  }
}

/* 表格 */
.el-table {
  --el-table-header-bg-color: #f5f7fa;
  
  th.el-table__cell {
    background-color: #f5f7fa;
    font-weight: bold;
    color: var(--text-color-primary);
  }
  
  .el-table__row {
    &:hover > td.el-table__cell {
      background-color: rgba(var(--primary-color), 0.05);
    }
  }
}

/* 分页 */
.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
  
  .el-pagination__sizes {
    margin-left: 15px;
  }
}

/* 对话框 */
.el-dialog {
  border-radius: var(--border-radius-base);
  
  &__header {
    border-bottom: 1px solid var(--border-color-light);
    padding-bottom: 15px;
  }
  
  &__title {
    font-weight: 600;
    color: var(--text-color-primary);
  }
  
  &__footer {
    border-top: 1px solid var(--border-color-light);
    padding-top: 15px;
  }
}

/* 卡片 */
.el-card {
  border-radius: var(--border-radius-base);
  border: none;
  box-shadow: var(--box-shadow-light);
  margin-bottom: 20px;
  
  &__header {
    border-bottom: 1px solid var(--border-color-light);
    font-weight: 600;
  }
}

/* 标签页 */
.el-tabs {
  &__item {
    &.is-active {
      color: var(--primary-color);
    }
    
    &:hover {
      color: var(--primary-color);
    }
  }
  
  &__active-bar {
    background-color: var(--primary-color);
  }
}

/* 菜单 */
.el-menu {
  border-right: none;
  
  &-item {
    &.is-active {
      background-color: rgba(var(--primary-color), 0.1);
      color: var(--primary-color);
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-color: var(--primary-color);
      }
    }
  }
}